<script setup lang="ts">

import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";
interface AppItem {
  id: number;
  url: string;
  name: string;
  location: string;
  recommend: string;
}
const middlelist = ref<AppItem[]>([]);
const handleUserClick = () => {
  const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr); // 解析为对象
      const userId = userInfo.id; // 提取用户ID

      router.push({
        name: 'download', // 匹配路由配置的 name
        params: { userId }, // 传递参数
      });
    } catch (error) {
      console.error('解析用户信息失败', error);
      router.push('/sign'); // 解析失败则跳登录
    }
  } else {
    router.push('/sign'); // 未登录则跳登录
  }
};
onMounted(async () => {
  try {
    const response = await axios.get("http://localhost:8080/AppStore/list");
    middlelist.value = response.data;
    console.log("后端返回数据：", response.data);
  } catch (error) {
    console.error("数据获取失败:", error);
  }
});
let userId = ref("")
const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
if (userInfoStr) {
  try {
    const userInfo = JSON.parse(userInfoStr); // 解析为对象
    userId = userInfo.id; // 提取用户ID
    // 跳转用户页面
  } catch (error) {
    console.error('解析用户信息失败', error);
    router.push('/sign'); // 解析失败则跳登录
  }
} else {
  router.push('/sign'); // 未登录则跳登录
}
</script>

<template>
  <!-- 首页轮播图 -->
  <div class ="carouselContainer" >
    <div class = "appIcon" >
      <el-carousel  indicator-position="none"
          :interval="2000"
          type="card"
          arrow="never"
          height="160px"
          style="width: 600px;"
      >
        <el-carousel-item
            v-for="(item, index) in middlelist"
            :key="index"
            style="border-radius: 30px;"
        >
          <div class="carousel-card">
            <img
                :src="item.url"
                alt="carousel"
                class="card-image"
            >

            <div class="card-title">
              <router-link :to="{name: 'AppView',params:{id:item.id},query:{userId}}" tag = "div">
              <img :src="item.url" alt="" class = "card">
                </router-link>
              <div class = "desc">
                <span class = "carName">{{ item.name }}</span>
                <div>{{ item.location }}</div>
                <div class = "carNameDesc">{{ item.recommend }}</div>
              </div>
              <button @click = "handleUserClick" class="installButton">安装</button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped>

.carouselContainer{
  display: flex;
  justify-items: auto;
  align-items: center;
  max-width: 420px;

  padding: 0 16px;
  margin-top: 10px;
}
/*安装按钮*/
.installButton{
  margin-top: 40px;
  margin-left: 10px;
  background: dodgerblue;
  color: white;
  border-radius: 5px;
}
.carName{
  display: flex;
  font-weight: bold;
}
.desc{
  display: flex;
  flex-direction: column;
  font-size: 8px;
  margin-top: 40px;
  padding-left: 10px;
}
.card{
  display: flex;
  width: 40px;
  margin-top: 40px;
  border-radius: 10px;
}
.card-title{
  display: flex;
  height: 0;
  width: 400px;
  align-items: center;
}
.appIcon{
  display: flex;
  margin-top: 20px;
  width: 3000px;
  flex-direction: column;
  align-items: center;
}
/*大图标*/
.card-image{
  display: flex;
  height:100px;
  width: 180px;
}
</style>